<script setup>
import { ref, reactive, unref, inject } from "vue";
import { useRouter } from "vue-router";
import useAdminStore from "../../store/adminStore";

import {
  loginApi,
  getAdminsApi,
  getAdminTotalApi,
  addAdminApi,
  delAdminApi,
  editAdminApi,
} from "@/api/adminApi";
const router = useRouter();
const adminStore = useAdminStore();
const message = inject("message");
// 跳转注册
function goReg() {
  // 跳转注册
  router.push({ path: "/reg" });
}
// ruleForm
const ruleForm = reactive({
  mobile: "17605201754",
  password: "123456",
});
const formRef = ref(null);
const validateUsername = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入账号"));
  } else {
    // if (ruleForm.checkPass !== '') {
    //   if (!ruleFormRef.value) return
    //   ruleFormRef.value.validateField('checkPass', () => null)
    // }
    callback();
  }
};
const validatePassword = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    // if (ruleForm.checkPass !== '') {
    //   if (!ruleFormRef.value) return
    //   ruleFormRef.value.validateField('checkPass', () => null)
    // }
    callback();
  }
};
// rules
const rules = reactive({
  mobile: [{ validator: validateUsername, trigger: "blur", required: true }],
  password: [{ validator: validatePassword, trigger: "blur", required: true }],
});
// 提交表单
const submitForm = (formData) => {
  let form = unref(formRef);
  form.validate(async (valid) => {
    if (valid) {
      // console.log('submit!')
      // 登录
      const res = await loginApi(formData);
      if (res.code == 1) {
        message.success("登录成功");
        console.log(res.msg);
        sessionStorage.setItem("userinfo", JSON.stringify(res.msg));
        router.push("/main/home");
      } else {
        message.warning(res.msg);
      }
    } else {
      // console.log('error submit!')
      return false;
    }
  });
  // console.log(formData,'表单数据')
};
// 重置表单
const resetForm = () => {
  let form = unref(formRef);
  form.resetFields();
};
//注册
const register = () => {};
</script>

<template>
  <div class="box">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>管理员登录</span>
          <el-link type="primary" @click="goReg">去注册</el-link>
        </div>
      </template>
      <el-form
        ref="formRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="100px"
        size="large"
        class="demo-ruleForm"
      >
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="ruleForm.mobile" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleForm)"
            >登录</el-button
          >
          <el-button @click="resetForm()">重置</el-button>
          <el-button type="primary" @click="register">注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  width: 480px;
}
</style>
